import axios from 'axios';
import React from 'react';
import 'antd/dist/antd.css';
import { Form,Table ,Space,Button,Select,Input} from 'antd';
import { useState } from 'react';
const { Option } = Select;
  const columns = [
	{
		title: '编号',
		dataIndex: 'id',
		key: 'id',
	  },
	{
	  title: '姓名',
	  dataIndex: 'name',
	  key: 'name'
	},
	{
	  title: '密码',
	  dataIndex: 'password',
	  key: 'password',
	},
	{
	  title: '用户名',
	  dataIndex: 'username',
	  key: 'username',
	},
	{
		title: '性别',
		dataIndex: 'sex',
		key: 'sex',
		render:(sex)=>{
			if(sex =="1"){
				return "男";
			}
			return "女";
		}
	  }
  ];
 
  
class Home extends React.Component {


	constructor(props) {
		super(props);
		// 定义 state
		this.state = {
			dataSources: [ ],
			pageNum: 1,
			pageSize: 8,
			total: 0,
			username:'',
			name:'',
			sex:''
		};
	  }

	questData=(pageVO)=>{
        axios.post('http://localhost:8081/test/searchUser',pageVO)
            .then((response) => {

			// 将返回的数据设置state值
				if (response.status === 200) {
					const total=response.data.total;
					const data = response.data.userLists.map(d => {
						d.key = d.id;
						return d;
					});
					this.setState({
						message: "请求成功",
						total:total,
						dataSources: data

					})
				}
			}
			
			)
            .catch(err => console.log(err))
	}


	//初始化数据
	  componentWillMount(){
		const pageVO={
			pageNum:this.state.pageNum,
			pageSize:this.state.pageSize,
			username:this.state.username,
			name:this.state.name,
			sex:this.state.sex
		}
		// 后端返回数据和总条数
		this.questData(pageVO)

	  }


handleSex=e=>{
		this.setState({
			sex:e.target.value
		})
		console.log("这里");
		console.log(this.setState.sex)
}

	 onSearch=()=>{
		console.log("你好");
		// 每次搜索重新设置页面
		this.setState({
			pageNum:1
		});
		const pageVO={
			pageNum:1,
			pageSize:this.state.pageSize,
			username:this.state.username,
			name:this.state.name,
			sex:this.state.sex
		}
		// 后端请求数据
			this.questData(pageVO)
	 }
	
	render() {

		return (
			<div className="App">

				<Form
					layout={'inline'}
				>
					<Form.Item label="按用户名">
						<Input 
								value={this.state.username} 
								placeholder="输入查找用户名关键字" 
								onChange={(e)=>{
									const val = e.target.value
									this.setState({
										username: val
									})
								}}
							/>
					</Form.Item>

					<Form.Item label="按姓名">
						<Input
								value={this.state.name} 
								placeholder="输入查找昵称关键字"
								onChange={(e)=>{
								const val = e.target.value
								this.setState({
									name: val
								})
							}}
						/>
					</Form.Item>
					<Form.Item>
						<Select 
							defaultValue="全部"
							style={{ width: 120 }}
							value={this.state.sex} 
							onChange={(value)=>{
								const val = value
								console.log(val)
								this.setState({
								sex: val
								})
							}}>
							<Option value="">全部</Option>
							<Option value={1}>男</Option>
							<Option value={2}>女</Option>
						</Select>
						
						</Form.Item>
					<Form.Item>
						<Button
						onClick={
							this.onSearch
						}
						type="primary"
						>查询</Button>
					</Form.Item>

				</Form>
				<br/>
			   <Table
			    dataSource={this.state.dataSources} 
			    columns={columns}
				pagination={{
					defaultCurrent: 1,
					current: this.state.pageNum,
					total: this.state.total,
					pageSize: this.state.pageSize,
					showTotal: (total) => {
						return `总共${total}条`;
					},
					onChange: (page, pageSize) => {
						//把当前页数据保存下来作为参数
						
						this.setState({
							pageSize: pageSize,
							pageNum: page
						})
						const pageVO={
							pageNum:page,
							pageSize:pageSize,
							username:this.state.username,
							name:this.state.name,
							sex:this.state.sex
						}
					// 后端请求数据
					this.questData(pageVO)
				  

					}
				}}
			   />
			</div>
		  );
	}
}

export default Home;